window.addEventListener('load',function(){
 
      /*轮播图*/
    // var box = document.querySelector('.box');
    var imgs = document.querySelectorAll('.zhao li');
    var indexs = document.querySelectorAll('.dot span');
    var btn = ['#E8E8E8','#F6712C','#F77619','#F9D133','#0080FF'];
    var figure  =document.querySelector('.figure');
    var index = 0;//初始化下标
    var lastIndex = 0;
    var timer;
    // 上一张
    function prevImg(){
        index = index == 0 ? index = imgs.length - 1 : index - 1;
        showImg();
    }
    // 下一张
    function nextImg(){
        index = index == imgs.length-1  ? 0 : index + 1;
        showImg();
        figure.style.backgroundColor = btn[index];
    }

    // 展示照片
    function showImg(){
        imgs[lastIndex].className = '';
        indexs[lastIndex].className = '';

        imgs[index].className = 'curr';
        indexs[index].className = 'current';
        // 记录上一次索引
        lastIndex = index;
    }

    // 1.自动切换
    timer = setInterval(nextImg,4000);
    showImg();
    // 2.五个小按钮点击/移入切换
    for(var i=0;i<indexs.length;i++){
        indexs[i].index = i;
        // 点击切换
        indexs[i].onclick = function(){
            index = this.index;
            showImg();
            figure.style.backgroundColor = btn[index];
        }
        // 移入切换
        // indexs[i].onmouseover = function(){
        //     index = this.index;
        //     showImg();
        // }
    }
    // 3.点击上一张/下一张切换
    // prev.onclick = function(){
    //     prevImg();
    // }
    // next.onclick = function(){
    //     nextImg();
    // }
    // 初始化让按钮隐藏，移入box元素显示按钮,并且移入box元素计时器停止移出继续。
    // box.onmouseover = function(){
    //     clearInterval(timer);//清除计时器
    //     timer = null;
    //     prev.style.display = 'block';
    //     next.style.display = 'block';
    // }
    // box.onmouseout = function(){
    //     if(timer){
    //         return;
    //     }
    //     timer = setInterval(nextImg,1000);
    //     prev.style.display = 'none';
    //     next.style.display = 'none';
    // }
    })